<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中的列表渲染</title>
    <script src="../vue.js"></script>
   
</head>
<body>
    <div id="app">
         <!-- r让key等于索引也可以  但是  性能不好  ，让vue  复用dom节点 -->
      <!--   循环数组 -->
       <!-- <template v-for ="(item,index) of list" 
                :key="item.id"
                <div>
                    {{item.text}} ----{{index}}
                </div>
                <span> {{item.text}} ----{{index}}</span>
        </template> -->

        <!--   循环对象 -->

        <div v-for ="(item,key,index) of userInfo">
            {{item}} ----{{key}} ----{{index}}
        </div>
      

      <!--   当我们  想往数组添加数据  不能通过增加索引下标的方式 添加 ，不会让页面相应  ，会修改成功
        利用vue提供的方法
        //   数组处理数据
         1.push  pop  shift   unshift  splice  sort    reserve
           vm.list.splice(1,1，{'id'=>'3333',text:"Dell1"});
         2.改变数据的引用地址
         3.set  方法
         vm.set(vm.userInfo,1,5)
         vm.$set(vm.userInfo,1,5)

         //  对象  处理
         1.赋值  ：vm.userInfo.name = "test"
          改变数据的引用地址
         2.set  方法  向对象注入数据  
          vm.set(vm.userInfo,'address','shanghai')
          vm.$set(vm.userInfo,'address','shanghai')
         
    -->
    </div>
    
    <script>
         // 循环数组
    //    var vm = new Vue({
    //        el:"#app",
    //        data: {
    //             list:[{
    //                     id:"12232",
    //                     text:"hello",
    //                 },{
    //                     id:"12232",
    //                     text:"hello",
    //                 },{
    //                     id:"12232",
    //                     text:"hello",
    //                 },{
    //                     id:"12232",
    //                     text:"hello",
    //                 },{
    //                     id:"12232",
    //                     text:"hello",
    //                 },                    
    //             ],
    //        },         
    //    });

    var app = new Vue({
           el:"#app",
           data:{
               userInfo:{
                   name:'Dell',
                   age:28,
                   gender:'male',
                   salary:'secret',
               }
           },
        });
       
    </script>
</body>
</html>